<template>
  <view class="order-page">
    <view class="filter-tabs">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab', currentTab === index ? 'active' : '']"
        @click="handleTabClick(index)"
      >
        {{ tab.name }}
      </view>
    </view>
    <view class="content">
      <view
        class="order-item"
        v-for="(item, index) in orderList"
        :key="index"
        @click="handleOrderItemClick(item)"
      >
        <view class="order-item-left">
          <view class="title">{{ item.orderType }}</view>
          <view class="titleName">{{ item.parkingIotName }}</view>
          <view class="time">下单时间：{{ item.creatorTime }}</view>
          <view class="carNumber">{{ item.licensePlateNumber }}</view>
        </view>
        <view class="order-item-right">
          <view class="status">{{ item.orderStatus }}</view>
          <view class="price">￥{{ item.orderAmount }}</view>
        </view>

        <view class="order-item-bottom">
          <view class="borderSty">再次购买</view>
          <view class="fillSty" v-if="item.orderStatus === '待支付'"
            >去支付</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "待支付",
          value: "PENDING_PAYMENT",
        },
        {
          name: "已支付",
          value: "PAID",
        },
        {
          name: "已使用",
          value: "USED",
        },
        {
          name: "已取消",
          value: "CANCELLED",
        },
        {
          name: "已退款",
          value: "REFUNDED",
        },
      ],
      currentTab: 0,
      orderList: [],
    };
  },
  onLoad(options) {
    console.log(options);
    this.currentTab = this.tabs.findIndex((tab) => tab.name === options.type);
    this.getOrderList();
  },
  methods: {
    handleTabClick(index) {
      this.currentTab = index;
      this.getOrderList();
    },
    getOrderList() {
      uni.showLoading({
        title: "加载中",
      });
      this.$httpReq
        .getQueryOneselfListOrder({
          orderState: this.tabs[this.currentTab].value,
        })
        .then((res) => {
          console.log(res);
          this.orderList = res.data;
          uni.hideLoading();
        });
    },
    handleOrderItemClick(item) {
      uni.navigateTo({
        url: `/pages/index/order/orderDetails?orderId=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-page {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;

  .filter-tabs {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #eee;
    padding: 20rpx;
    background: #ffffff;

    .tab {
      background: #f4f7fa;
      border-radius: 50rpx;
      padding: 10rpx 20rpx;
      font-size: 22rpx;
      color: #666;

      &.active {
        color: #ffffff;
        background: #3685fa;
      }
    }
  }
  .content {
    padding: 20rpx;
    box-sizing: border-box;
    .order-item {
      display: flex;
      justify-content: space-between;
      background: #ffffff;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      padding-bottom: 50rpx;
      position: relative;

      .order-item-left {
        .title {
          width: 98rpx;
          height: 36rpx;
          text-align: center;
          background: #3685fa;
          font-size: 24rpx;
          color: #ffffff;
          padding: 5rpx 10rpx;
          border-radius: 10rpx;
        }
        .titleName {
          font-size: 30rpx;
          color: #333;
          margin-top: 10rpx;
        }
        .time {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
        .carNumber {
          font-size: 30rpx;
          color: #333;
          margin-top: 10rpx;
        }
      }
      .order-item-right {
        padding-top: 60rpx;
        .status {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
        .price {
          font-size: 28rpx;
          color: #f36718;
          margin-top: 10rpx;
        }
      }
      .order-item-bottom {
        position: absolute;
        bottom: 30rpx;
        right: 10rpx;
        display: flex;
        .borderSty {
          width: 100rpx;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
          border: 1rpx solid #f36718;
          border-radius: 30rpx;
          padding: 10rpx 20rpx;
          font-size: 24rpx;
          color: #f36718;
          margin-left: 10rpx;
        }
        .fillSty {
          width: 100rpx;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
          background: #f36718;
          border-radius: 30rpx;
          padding: 10rpx 20rpx;
          font-size: 24rpx;
          color: #ffffff;
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>